<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>demo1</title>
	<meta name="keywords" content=""/>
	<meta name="description" content=""/>
	<meta name="viewport" content="width=device-width"/>
	<link rel="shortcut icon" href="img/touchicon.png"/>
	<link rel="stylesheet" href=""/>
	<style type="text/css">
		#box table{margin:50px auto;border-collapse:collapse;text-align:center;color:#333;}
		#box table td{width:50px;height:50px;}
	</style>
</head>
<body>
	<div id="box">
		
	</div>
	<script>
		var arr = ['#c44','#f0a','#0fa','#77d','#0af','#a0f','#af0','#afa','#aaf'];
		var i = 1;
		var s = '';
		while (i<=9) {
			var j = 1;   //变量声明在外部循环的内部，确保下一次循环时被重新赋值
			var s1 = '';    //变量声明在外部循环的内部，确保下一次循环时被重新赋值
			while (j<=i) {
				s1 += '<td style="background:'+arr[i-1]+';">'+i+'x'+j+'='+(i*j)+'</td>' ;
				j++;
			}
			s += '<tr>'+ s1 +'</tr>';
			i++;
		}
		document.getElementById('box').innerHTML = '<table border="1">'+ s +'</table>';
	</script>
</body>
</html>